import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import {
  Input,
  message,
  Button,
  Avatar,
  Card,
  Modal,
  Alert,
  Tag,
  Icon,
  List,
} from 'antd'
import { Trans, withI18n } from '@lingui/react'
import { UserLink } from 'components'

// const FormItem = Form.Item
const Search = Input.Search
const { Meta } = Card

@withI18n()
class UserModal extends PureComponent {
  state = {
    targetuser: {},
  }
  handleOk = () => {
    const { onOk, onCancel, devices, selected, distributeresult } = this.props
    const { targetuser } = this.state
    if (distributeresult) {
      onCancel()
      return
    }
    if (targetuser && targetuser.objectId) {
      let selects = []
      for (var index = 0; index < selected.length; index++) {
        let item = devices[selected[index]]
        if (item) selects.push(item.objectId)
      }
      onOk({ deviceids: selects, touser: targetuser.objectId })
    } else {
      message.error('请选择需要分配的用户！')
    }
  }

  render() {
    const {
      finduser,
      confirmLoading,
      distributeresult,
      users,
      queryuserloading,
      devices,
      selected,
      i18n,
      ...modalProps
    } = this.props
    const { targetuser } = this.state
    let count = distributeresult ? distributeresult.successed : 0
    return (
      <Modal
        {...modalProps}
        closable={false}
        keyboard={false}
        confirmLoading={confirmLoading}
        okText={distributeresult ? i18n.t`Close` : i18n.t`Confirm`}
        onOk={this.handleOk}
      >
        <Alert
          style={{ marginBottom: '10px', background: '#fff' }}
          message={`${i18n.t`Choosed Devices`}:`}
          description={selected.map(index => {
            const item = devices[index]
            return (
              <Tag color="cyan" style={{ marginTop: '10px' }}>
                {item.DeviceName}
              </Tag>
            )
          })}
        />
        {distributeresult ? (
          <Alert
            style={{ marginBottom: '10px', background: '#fff' }}
            message={i18n.t`Result`}
            description={
              <div>
                {count > 0 && (
                  <Alert
                    style={{ marginTop: '5px' }}
                    message={i18n.t`Successed ${count} items`}
                  />
                )}
                {distributeresult.wrongs.length > 0 &&
                  distributeresult.wrongs.map(item => {
                    let Imei = item.Imei
                    return (
                      //123
                      <Alert
                        style={{ marginTop: '5px' }}
                        type="error"
                        message={
                          i18n.t`Device` +
                          ` ${item.DeviceName} ` +
                          i18n.t`Distribution failed!`
                        }
                        description={i18n.t`The user already has a device with IMEI number ${Imei}`}
                      />
                    )
                  })}
                {distributeresult.errors.length > 0 &&
                  distributeresult.errors.map(item => {
                    return (
                      <Alert
                        style={{ marginTop: '5px' }}
                        type="warning"
                        showIcon
                        message={
                          i18n.t`Device` +
                          ` ${item.DeviceName} ` +
                          i18n.t`Distribution failed!`
                        }
                        description={i18n.t`Server encounters unknown problems`}
                      />
                    )
                  })}
              </div>
            }
          />
        ) : (
          <Alert
            style={{ marginBottom: '10px', background: '#fff' }}
            message={
              <div style={{ display: 'inline-block' }}>
                <Trans>Copy Devices To</Trans>：
                {targetuser.objectId ? (
                  <UserLink data={targetuser} />
                ) : (
                  <Tag>
                    <Trans>None</Trans>
                  </Tag>
                )}
              </div>
            }
            description={
              <div>
                <Search
                  style={{ marginTop: '10px' }}
                  placeholder={i18n.t`Enter the user's name`}
                  onSearch={value => {
                    finduser(value)
                  }}
                  // prefix={<Icon type="user"></Icon>}
                  enterButton
                />
                <List
                  style={{ marginTop: '5px' }}
                  grid={{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 2 }}
                  loading={queryuserloading}
                  dataSource={users}
                  renderItem={item => {
                    let choosed =
                      targetuser.objectId &&
                      targetuser.objectId === item.objectId
                    return (
                      <List.Item>
                        <Card
                          style={{ borderColor: choosed ? '#8fc9fb' : '#fff' }}
                          actions={[
                            <Button
                              type={choosed ? 'primary' : 'default'}
                              onClick={e => {
                                // if (choosed) { }
                                this.setState({
                                  targetuser: choosed ? {} : item,
                                })
                              }}
                            >
                              <Trans>Select</Trans>
                            </Button>,
                          ]}
                        >
                          {
                            <Meta
                              avatar={<Avatar src={item.avatar} />}
                              title={item.username}
                              description={item.role}
                            />
                          }
                        </Card>
                      </List.Item>
                    )
                  }}
                />
              </div>
            }
          />
        )}
      </Modal>
    )
  }
}

UserModal.propTypes = {
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default UserModal
